<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 17:14:36
-->
<template>
  <div ref="right1_container" style="height:95%"> </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
export default {
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){
  const uvBillData = [
  { time: '2019-03', value: 47.9, type: 'tsp' },
  { time: '2019-04', value: 50.1, type: 'tsp' },
  { time: '2019-05', value: 49.5, type: 'tsp' },
  { time: '2019-06', value: 48.1, type: 'tsp' },
  { time: '2019-07', value: 48.6, type: 'tsp' },
  { time: '2019-03', value: 97, type: 'pm10' },
  { time: '2019-04', value: 130, type: 'pm10' },
  { time: '2019-05', value: 111, type: 'pm10' },
  { time: '2019-06', value: 80, type: 'pm10' },
  { time: '2019-07', value: 140, type: 'pm10' },
];

const transformData = [
  { time: '2019-03', count: 47, name: 'pm2.5' },
  { time: '2019-04', count: 67, name: 'pm2.5' },
  { time: '2019-05', count: 76, name: 'pm2.5' },
  { time: '2019-06', count: 88, name: 'pm2.5' },
  { time: '2019-07', count: 32, name: 'pm2.5' },
  { time: '2019-03', count: 75, name: 'no2' },
  { time: '2019-04', count: 65, name: 'no2' },
  { time: '2019-05', count: 80, name: 'no2' },
  { time: '2019-06', count: 90, name: 'no2' },
  { time: '2019-07', count: 56, name: 'no2' },
  { time: '2019-03', count: 68, name: 'so2' },
  { time: '2019-04', count: 56, name: 'so2' },
  { time: '2019-05', count: 87, name: 'so2' },
  { time: '2019-06', count: 45, name: 'so2' },
  { time: '2019-07', count: 67, name: 'so2' },
];

const dualAxes = new DualAxes(this.$refs.right1_container, {
  data: [uvBillData, transformData],
  xField: 'time',
  yField: ['value', 'count'],
  geometryOptions: [
    {
      geometry: 'line',
      seriesField: 'type',
      lineStyle: {
        lineWidth: 3,
        lineDash: [5, 5],
      },
      smooth: true,
    },
    {
      geometry: 'line',
      seriesField: 'name',
      point: {},
    },
  ],
});

dualAxes.render();
    } 
  }
}
</script>
